<template>
	<view class="" style="height:100%" :style="{display:show?'block':'none'}">
		<view class="example" style="position: fixed;width: 100%;bottom:100rpx;z-index: 9999;display: flex;">
			<button type="default" @click="startTakePic">Go</button>
			<button class="backBtn" type="default" @click="toProjectList"> <uni-icons type="home-filled" color="#d1100a"
					size="30"></uni-icons>
			</button>
		</view>
		<view class="swiper-back " style="height:100%">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular"
				:interval="interval" :duration="duration" indicator-active-color="#5f5f5f" indicator-color="#b6b6b6">
				<!-- style="border-radius: 15rpx;" -->
				<swiper-item v-for="(item,i) in list3" :key="i">
					<image class="image" :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="example" >
			 <u-swiper
                :list="list3"
                previousMargin="30"
                nextMargin="30"
                circular
                :autoplay="false"
                radius="5"
                bgColor="#ffffff"
        ></u-swiper>
			<button type="default" @click="startTakePic">Go</button>
			<button class="backBtn" type="default" @click="toProjectList"> <uni-icons type="home-filled" color="#d1100a"
					size="30"></uni-icons>
			</button>
		</view> -->
		<!-- <ua-pop ref="UaPopup" /> -->
		<AuthCamera ref="AuthCamera" type="top" :permissionID="permissionIDAuthCamera" @changeAuthClose="changeAuthClose"
			@changeAuthCamera="changeAuthCamera" />
	</view>
</template>

<script>
	import AuthCamera from "@/components/yk-authpup/AuthCamera.vue";
	// import UaPopup from "@/components/ua-pop/ua-pop.vue"
	export default {
		components: {
			AuthCamera
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// permissionIDAuthCamera: 'WRITE_EXTERNAL_STORAGE',
				permissionIDAuthCamera: 'CAMERA',
				//轮播图配置
				indicatorDots: false, //是否显示指示点
				circular: true, //是否采用衔接滑动
				autoplay: true, //是否自动华东
				interval: 8000, //切换的间隔时间 停留的时间
				duration: 1000, //滑动动画时长 切换时长
				list3: [
					'../../static/T1.jpg',
					'../../static/T2.jpg',
					'../../static/T3.jpg',
				],
				platform: "",
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			// 跳转到**应用**的权限页面
			gotoAppPermissionSetting() {
				if (this.platform === 'ios') {
					var UIApplication = plus.ios.import("UIApplication");
					console.log('获取UIApplication', UIApplication)
					var application2 = UIApplication.sharedApplication();
					var NSURL2 = plus.ios.import("NSURL");
					// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");		
					var setting2 = NSURL2.URLWithString("app-settings:");
					console.log('获取设置urlsetting2', setting2)
					application2.openURL(setting2);

					plus.ios.deleteObject(setting2);
					plus.ios.deleteObject(NSURL2);
					plus.ios.deleteObject(application2);
				} else {
					var Intent = plus.android.importClass("android.content.Intent");
					var Settings = plus.android.importClass("android.provider.Settings");
					var Uri = plus.android.importClass("android.net.Uri");
					var mainActivity = plus.android.runtimeMainActivity();
					var intent = new Intent();
					// 'android.settings.APP_NOTIFICATION_SETTINGS'
					intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
					var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
					intent.setData(uri);
					mainActivity.startActivity(intent);
				}
			},

			//用户授权权限后的回调
			changeAuthCamera() {
				//这里是权限通过后执行自己的代码逻辑
				this.$emit('changeAuthCameraStartTakePic')
				console.log('权限已授权，可执行自己的代码逻辑了');
			},
			changeAuthClose(e) {
				var that = this
				console.log('权限没有授权，可执行自己的代码逻辑了', e);
				// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限  
				uni.showModal({
					title: '未授权相机权限',
					content: '请打开手机相机功能（点击确定后在权限中授权相机权限）',
					confirmText: '去授权',
					showCancel: false, // 不显示取消按钮
					success(res) {
						if (res.confirm) {
							that.gotoAppPermissionSetting()
						}
					}
				});
			},
			startTakePic() {
				var that = this
				let platform = uni.getSystemInfoSync().platform; //首先判断app是安卓还是ios
				this.platform = platform
				// this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CALL_PHONE 拨打电话
				// 判断如果是苹果手机直接调用即可  安卓走以下逻辑  
				if (this.platform === 'android' || this.platform === 'Android') {
					setTimeout(() => {
						that.$refs['AuthCamera'].open('GO');
					}, 500)
				} else {
					this.$emit('startTakePic')
				}
				// 后续需要打开
				// if (platform === 'android') {
				// 	// 同时展示相机，相册权限使用说明蒙版 
				// 	setTimeout(()=>{
				// 		that.$refs['authpup'].open();
				// 	},500)
				// } else {
				// 	//这里是ios的方法
				// 	let result = false;
				// 	// 利用 h5+ 方法
				// 	var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
				// 	console.log('AVCaptureDevice', AVCaptureDevice)
				// 	var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
				// 	console.log("authStatus:" + authStatus);
				// 	if (authStatus == 3) {
				// 		result = true;
				// 		console.log("相机权限已经开启");

				// 		this.$emit('startTakePic')
				// 	} else {
				// 		let UaPopup = that.$refs.UaPopup
				// 		UaPopup.show({
				// 			title: '相机权限使用说明',
				// 			content: '便于您使用该功能上传您的照片/图片/视频及用于更换头像、项目上传/分享、下载等场景中读取和写入相册和文件内容',
				// 			shadeClose: false,
				// 			anim: 'fadeIn',

				// 			btns: [{
				// 					text: '取消',
				// 					onTap() {
				// 						console.log('您点击了取消！');
				// 						UaPopup.close();
				// 					}
				// 				},
				// 				{
				// 					text: '去授权',
				// 					style: 'color: #D1100A',
				// 					onTap() {
				// 						console.log('您点击了确定！');
				// 						that.gotoAppPermissionSetting()
				// 					}
				// 				}
				// 			]
				// 		})
				// 	}
				// 	plus.ios.deleteObject(AVCaptureDevice);
				// }
			},
			// 去项目页
			toProjectList() {
				this.$emit('toProjectList')
			},
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep uni-swiper {
		height: 100% !important;
	}

	.swiper-back {

		//轮播图3d效果区域
		// margin-top: 50rpx;
		.active {
			opacity: 1;
			z-index: 10;
			height: 270rpx;
			width: 75vw;
			top: 7%;
			transition: all 0.2s ease-in 0s;
		}

		.swiper-box {
			// height: 150px;
			border-radius: 15rpx !important;
			// margin-left: 20rpx;
			// margin-right: 20rpx;
			// margin-bottom: 20rpx;

			/deep/ .swiper-item.data-v-6f423f94 {
				// border-radius: 15rpx !important;
				//设置轮播图圆角值 覆盖原来的值
			}
		}

		.swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #999;
			color: #fff;
			// border-radius: 15rpx !important;
		}

		/deep/.image {
			width: 100%;
			// border-radius: 15rpx !important;
			height: 100%;
		}
	}

	// .image {
	// 	height: 200px;
	// 	width: 90vw;
	// 	margin: 0 auto;
	// 	display: block;
	// }

	.margin {
		margin: 0 2%;
	}

	.fixedBtn {
		position: fixed;
		bottom: 70px;
		right: 20rpx;
		/* #ifdef APP */
		bottom: 20rpx;
		/* #endif */
	}

	.takePic {
		background-color: #fff;
		height: 100%;
		overflow: scroll;

		.preForm {

			background: #fff;
			padding: 10px;
			border-top: 1px solid #ccc;

			.preTitle {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.more {
					font-weight: normal;
					font-size: 16px
				}
			}

			.prePicBox {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;

				.pic {
					height: 210rpx;
					box-sizing: border-box;
					border: 1px solid #ccc;
					width: 32%;
					margin-bottom: 10rpx;

				}
			}
		}

		.formCheck {
			width: 100%;
			flex: 1;
			border: 1px solid #e5e5e5;
			box-sizing: border-box;
			border-radius: 4px;
			padding: 0 5px;
			padding-left: 10px;
			position: relative;
			display: flex;
			align-items: center;
			border-bottom: solid 1px #e5e5e5;
			-webkit-user-select: none;
			user-select: none;
			flex-direction: row;
			max-width: 100%;
			height: 35px;
			color: #6a6a6a;
			font-size: 12px;

			.input {
				flex: 1;
				max-width: 100%;

				.value {
					width: 460rpx;
					font-size: 14px;
					color: rgb(58, 58, 58);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.example {
			// z-index: 10;
			// // background-image: url('../../static/back.gif');
			// position: fixed;
			// background-size: cover;
			// background-repeat: no-repeat;
			// top: 0;
			// left: 0;
			width: 100vw;
			height: 100vh;

			.icon {
				position: fixed;
				right: 10px;
				top: 54px;
			}

			button {
				position: fixed;
				color: #d1100a;
				font-weight: bold;
				top: 70%;
				left: -368rpx;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 245rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50px;
				// border: 1px solid rgba(0, 0, 0, .2);
				box-shadow: 0px 4px 0px 0 rgba(0, 0, 0, .2);
			}

			.backBtn {
				top: 70%;
				left: 50%
			}
		}

		.form {
			// margin-top: 20px;
			background-color: #fff;
			padding: 20px;
		}
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		background: #999;
		opacity: 0;

		&.active {
			opacity: 1;
		}

		.logo {
			position: relative;
			margin-top: -400upx;
			width: 200upx;
			height: 200upx;
			// z-index: -1;
			opacity: 0;
			transition: opacity 0.3s;

			&.active {
				opacity: 1;
			}
		}
	}

	.tabbar-box-wrap {
		position: absolute;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;

		.tabbar-box {
			position: relative;
			display: flex;
			width: 100%;
			background: #fff;
			border-radius: 20upx;
			padding: 15upx 20upx;
			box-sizing: border-box;
			z-index: 2;
			box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

			&:after {
				content: '';
				position: absolute;
				bottom: -16upx;
				left: 0;
				right: 0;
				margin: auto;
				width: 50upx;
				height: 50upx;
				transform: rotate(45deg);
				background: #fff;
				z-index: 1;
				box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
				border-radius: 2px;
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #ffffff;
				border-radius: 20upx;
				z-index: 2;
			}

			.tabbar-box-item {
				// position: relative;
				width: 100%;
				z-index: 3;
				margin: 10upx;
				color: $uni-color-subtitle;
				text-align: center;
				font-size: $uni-font-size-base;

				.box-image {
					width: 100%;
					height: $uni-img-size-lg;
				}
			}
		}
	}
</style>